<div class="wrapper">
    <scroller class="scroll-wrapper" show-scrollbar="false" scroll-direction="vertical">
        <order-status :order="detailData"></order-status>

        <!--收货地址-->
        <div class="address-box">
            <div class="address">
                <div class="address-row">
                    <text class="row-item font-msyhl">{{userAddressInfo.userName}}</text>
                    <text class="row-item font-msyhl">{{userAddressInfo.phone}}</text>
                </div>

                <div class="address-row">
                    <text class="row-item font-msyhl">{{userAddressInfo.addressInfo}}</text>
                    <text v-if="userAddressInfo.plot" class="row-item font-msyhl">{{userAddressInfo.plot}}</text>
                    <text v-if="userAddressInfo.areaPoint" class="row-item font-msyhl">{{userAddressInfo.areaPoint}}</text>
                </div>
            </div>

            <image resize="stretch" class="address-border" :src="addressBorderBg"></image>
        </div>

        <div class="content">
            <order-title :sid="detailData.sid" :shopType="detailData.shoptype" :sname="detailData.sname" :order="detailData"></order-title>

            <order-content-detail :order="detailData"></order-content-detail>

            <div class="box">
                <div class="item">
                    <text class="item-text font-msyhl">商品总额：</text>
                    <text class="item-price font-msyhl">+ {{detailData.total_price | currency('¥')}}</text>
                </div>

                <div class="item">
                    <text class="item-text font-msyhl">运费：</text>
                    <text class="item-price font-msyhl">+ {{detailData.freight | currency('¥')}}</text>
                </div>

                <div class="item">
                    <text class="item-text font-msyhl">优惠：</text>
                    <text class="item-price font-msyhl">- {{detailData.discount | currency('¥')}}</text>
                </div>


                <div class="item">
                    <div class="item-inner">
                        <text class="item-text font-msyhl">共{{detailData.allnum}}种商品 小计：</text>
                        <text class="item-price item-total-price font-msyhl">{{detailData.allmoney | currency('¥')}}</text>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="item">
                    <text class="item-text font-msyhl">售后电话：</text>
                    <text class="item-text font-msyhl">{{detailData.shop_tel}}</text>
                </div>

                <div class="info">
                    <text class="info-text font-msyhl" v-if="detailData.transactionid">订单编号：{{detailData.transactionid}}</text>
                    <text class="info-text font-msyhl" v-if="detailData.addtime">创建时间：{{detailData.addtime}}</text>
                    <text class="info-text font-msyhl" v-if="detailData.paytime">付款时间：{{detailData.paytime}}</text>
                    <text class="info-text font-msyhl" v-if="detailData.sendtime">发货时间：{{detailData.sendtime}}</text>
                    <text class="info-text font-msyhl" v-if="detailData.finishtime">完成时间：{{detailData.finishtime}}</text>

                    <div class="info-box" v-if="detailData.records">
                        <text class="info-text font-msyhl">交易记录：</text>

                        <div class="info-list">
                            <text class="info-text font-msyhl" v-for="txt in recordList">{{txt}}</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </scroller>

    <div class="order-btn">
        <order-btn width=200 height=60 fontSize=30 :order="detailData" @delOrder="delOrder" @updateOrder="updateOrder"></order-btn>
    </div>
</div>